<template>
	<view class="login_page">
		<view class="header">
			<image src="https://static.tianwandailian.cn/static/server/newimage/back_icon.png" mode="" class="back-img"
				@click="goBack"></image>
			<view class="title-box">
				<view class="title">支付密码</view>
			</view>
		</view>
		<view class="main">
			<view class="login-box">
				<view class="form">
					<uv-form labelPosition="top" :model="form" ref="formRef">
						<view v-if="steps === 0">
							<uv-form-item prop="phone">
								<view class="ipt-box">
									<!-- <uv-input type="number" placeholder="请输入手机号" prefixIcon="phone" border="none"
										v-model="form.phone" clearable maxlength="11"></uv-input> -->
									{{ phoneNumberMask(viewPhone) }}
								</view>
							</uv-form-item>
							<uv-form-item prop="code">
								<view class="ipt-box">
									<uv-input type="number" :adjust-position="false" placeholder="请输入验证码"
										placeholder-class="placeholderStyle" border="none" v-model="form.code" :maxlength="6">
										<template v-slot:suffix>
											<uv-code ref="uCodeRef" @change="codeChange" seconds="60"></uv-code>
											<view @click="getCode" style="color: #6E68E9;font-size: 28rpx;">{{codeTips}}</view>
										</template>
									</uv-input>
								</view>
							</uv-form-item>
							<uv-button type="primary" text="下一步" :disabled="!form.phone" @click="submit(1)"
								customTextStyle="font-size: 28rpx;color:#fff"
								customStyle="margin-top:132rpx;width:600rpx;border-radius: 40rpx;height: 80rpx;"></uv-button>
						</view>
						<view v-else style="display: flex;flex-direction: column;align-items: center;">
							<uv-form-item prop="pwd">
								<view class="pwd-box">
									<view class="tips">请输入6位数支付密码</view>
									<uv-code-input v-model="form.pwd" color="#6E68E9" :adjust-position="false" :focus="true" size="50"
										space="12" dot></uv-code-input>
								</view>
							</uv-form-item>
							<uv-form-item prop="affirmPwd">
								<view class="pwd-box" style="align-items: flex-start;">
									<view class="tips">请再次确认支付密码</view>
									<uv-code-input v-model="form.affirmPwd" color="#6E68E9" :adjust-position="false" size="50" space="12"
										dot></uv-code-input>
								</view>
							</uv-form-item>
							<uv-button type="primary" text="确定" @click="submit(2)"
								customTextStyle="font-size: 28rpx;color:#fff"
								customStyle="margin-top:132rpx;width:600rpx;border-radius: 40rpx;height: 80rpx;"></uv-button>
						</view>
					</uv-form>
				</view>


			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		checkStr,
		phoneNumberMask
	} from '@/utils';
	import {
		SendSmsCode
	} from '@/api/modules/system';
	import {
		CheckPayPwdCode,
		UpdatePayPwd
	} from '@/api/modules/mine';
	import Md5 from 'js-md5'

	import useStore from '@/stores'

	const {
		globalStore
	} = useStore()


	const viewPhone = ref("")
	onShow(() => {
		viewPhone.value = globalStore.userInfo.phone
		form.phone = globalStore.userInfo.phone
	})

	const form = reactive({
		phone: "",
		pwd: "",
		code: "",
		affirmPwd: ""
	})

	const formRef = ref()

	const codeTips = ref("")
	//	倒计时
	function codeChange(text) {
		codeTips.value = text;
	}
	// 	获取验证码
	const uCodeRef = ref()

	function getCode() {

		console.log(checkStr('17278655554', 'mobile'));

		if (!form.phone || !checkStr(form.phone, 'mobile')) {
			uni.$uv.toast('请输入正确的手机号');
			return
		}

		if (uCodeRef.value.canGetCode) {
			uni.showLoading({
				title: '正在获取验证码'
			})
			SendSmsCode({
				phone: form.phone,
				isRegister: 1
			}).then(res => {
				uni.hideLoading();
				uni.$uv.toast('验证码已发送');
				uCodeRef.value.start();
			})
		}
	}

	const steps = ref(0)

	function submit(type) {
		if (type === 1) {

			if (!form.phone || !checkStr(form.phone, 'mobile')) {
				uni.$uv.toast('请输入正确的手机号');
				return
			}

			if (!form.code || form.code.length !== 6) {
				uni.$uv.toast('请输入6位数短信验证码');
				return
			}

			CheckPayPwdCode({
				phone: form.phone,
				smsCode: form.code
			}).then(res => {
				steps.value = type
			})
		} else {
			if (form.pwd.length !== 6 || form.affirmPwd.length !== 6) {
				uni.$uv.toast('请输入6位数字支付密码');
				return
			}

			if (form.pwd !== form.affirmPwd) {
				uni.$uv.toast('密码不一致,请重新输入');
				return
			}

			const MD5_PWD = Md5(form.affirmPwd)
			UpdatePayPwd({
				phone: form.phone,
				newPassWord: MD5_PWD,
				repeatPassword: MD5_PWD
			}).then(res => {
				uni.$uv.toast('支付密码设置成功');
				globalStore.setUserInfo({
					...globalStore.userInfo,
					isPayPassWord: 1
				})
				setTimeout(() => {
					goBack()
				}, 2000)
			})
		}
	}

	function goBack() {
		uni.navigateBack()
	}
</script>
<script>

</script>
<style scoped lang="scss">
	.login_page {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-size: contain;
		background-image: url('https://static.tianwandailian.cn/static/server/newimage/order_bg.png');
		background-repeat: no-repeat;
		position: relative;


		.header {
			height: 352rpx;
			width: 100%;
			position: relative;

			.back-img {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 95rpx;
				left: 32rpx;
			}

			.title-box {
				margin: 206rpx 76rpx 0;


				.title {
					color: #222;
					font-size: 64rpx;
					font-weight: 600;
				}


			}

		}

		.main {
			width: calc(100vw - 152rpx);
			padding: 0 76rpx;
			flex: 1;
			display: flex;

			.login-box {
				flex: 1;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.oauth {
					text-align: center;
					margin-top: 242rpx;

					.number {
						font-size: 60rpx;
						font-weight: 700;
						color: #222
					}

					.tip {
						margin-top: 30rpx;
						font-size: 28rpx;
						color: #888
					}

					.btn-box {
						margin-top: 120rpx;
					}
				}

				.form {
					margin-top: 60rpx;

					.uv-form {
						width: 100%;

						.ipt-box {
							background: #F5F5F5;
							height: 96rpx;
							border-radius: 16rpx;
							width: calc(100% - 60rpx);
							display: flex;
							align-items: center;
							padding: 0 30rpx;

							.placeholderStyle {
								color: #CCCCCC;
								font-size: 28rpx;
							}
						}

						.pwd-box {
							// background: #fff;
							border-radius: 16rpx;
							display: flex;
							flex-direction: column;
							padding: 0 30rpx;

							:deep(.uv-code-input__item) {
								background-color: #F5F5F5;

								border-radius: 16rpx;
								border: none !important;
							}

							.tips {
								font-size: 28rpx;
								color: #222222;
								margin: 32rpx 0;
							}
						}
					}
				}

				// .other-box {
				// 	width: 100%;
				// 	margin-bottom: 140rpx;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
				// 	font-size: 28rpx;
				// 	color: #222;

				// 	.select {
				// 		height: 35rpx;
				// 		width: 35rpx;
				// 		border: 1rpx solid #2979ff;
				// 		background: #2979ff;
				// 		border-radius: 50%;
				// 		display: flex;
				// 		align-items: center;
				// 		justify-content: center;
				// 	}

				// 	.unselect {
				// 		border: 1rpx solid #888;
				// 		background: #fff;
				// 	}
				// }
			}
		}
	}
</style>